<template>
  <page-header-wrapper>
    <template slot="extra">
      <back-button />
    </template>
    <a-spin :spinning="loading">
      <a-card :bordered="false">
        <div class="clothes-detail">
          <p>图片：<a-avatar :size="64" :src="clothesInfo.img_url" shape="square" icon="skin"></a-avatar></p>
          <p>衣服名称：{{ clothesInfo.clothes_name }}</p>
          <p>条形码：{{ clothesInfo.bar_code }}</p>
          <p>货架号：{{ clothesInfo.monad_code | monadCodeFilter(clothesInfo.split_code) }}</p>
          <p>是否是奢侈品：{{ clothesInfo.kinds_status | kindsStatusFilter }}</p>
          <div class="clothes-add-btns">
            <div class="table-page-search-wrapper">
              <a-form labelAlign="left">
                <a-row>
                  <a-col :span="17">
                    <a-form-item label="新增颜色" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                      <a-input placeholder="输入颜色" v-model="addRemark.color"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6" :offset="1">
                    <a-form-item>
                      <a-button type="primary" @click="clothesAddColor">提交</a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="17">
                    <a-form-item label="新增备注标签" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                      <a-input placeholder="输入名称" v-model="addRemark.tag"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6" :offset="1">
                    <a-form-item>
                      <a-button type="primary" @click="clothesAddTag">提交</a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
        </div>
        <a-divider style="margin-bottom: 24px" />
        <a-row class="remark-container">
          <a-col :span="6" class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-form-item label="选择颜色">

                <!-- <a-select v-model="remark.color" placeholder="请选择颜色">
                  <a-select-option v-for="item in remarkColorList" :key="item.name">{{ item.name }}</a-select-option>
                </a-select> -->
                <a-select
                  v-model="remark.color"
                  placeholder="请选择颜色"
                  mode="multiple"
                  @focus="
                    $refs.clothesColorForm.show()
                    $refs.selectcolor.blur()
                  "
                  ref="selectcolor"
                  :open="false"
                >
                  <a-select-option v-for="item in remarkColorList" :key="item.name">{{ item.name }}</a-select-option>
                </a-select>

              </a-form-item>
            </a-form>
            <a-row style="margin-top:-10px">
              <a-col :offset="4">
                <a-form-item>
                  <!-- <a-button type="primary" @click="clothesMakeColor">提交</a-button> -->
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <!-- <a-divider type="vertical" :style="{ height: '50px', float: 'left' }" /> -->
          <a-col :span="7" :offset="1">
            <a-form layout="vertical">
              <a-form-item label="配件名称:" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">

                <!-- <a-checkbox-group v-model="remark.split">
                  <a-row>
                    <a-col :span="8" v-for="item in remarkSplitList" :key="item.name">
                      <a-checkbox :value="item.name">
                        {{ item.name }}
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group> -->


                <!-- <a-select v-model="remark.split" placeholder="请选择配件" mode="multiple">
                  <a-select-option v-for="item in remarkSplitList" :key="item.name">{{ item.name }}</a-select-option>
                </a-select> -->

                <a-select
                  v-model="remark.split"
                  placeholder="请选择配件"
                  mode="multiple"
                  @focus="
                    $refs.clothesSpForm.show()
                    $refs.selectsplit.blur()
                  "
                  ref="selectsplit"
                  :open="false"
                >
                  <a-select-option v-for="item in remarkSplitList" :key="item.name">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
            <a-row style="margin-top:-20px">
              <a-col :offset="4">
                <a-form-item>
                  <!-- <a-button type="primary" @click="clothesSplit">提交</a-button> -->
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <!-- <a-divider type="vertical" :style="{ height: '50px', float: 'left' }" /> -->
          <a-col :span="9">
            <a-form layout="inline">
              <a-form-item label="打备注标签" :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }" style="width:100%">
                <!-- <a-checkbox-group v-model="remark.tag">
                  <a-row>
                    <a-col :span="8" v-for="item in remarkTagList" :key="item.name" >
                      <a-checkbox :value="item.name">
                        {{ item.name }}
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group> -->
                <a-select
                  v-model="remark.tag"
                  placeholder="请选择标签"
                  mode="multiple"
                  @focus="
                    $refs.clothesTagForm.show()
                    $refs.select.blur()
                  "
                  ref="select"
                  :open="false"
                >
                  <a-select-option v-for="item in remarkTagList" :key="item.name">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-row style="margin-top:10px">
                <a-col :offset="5">
                  <a-form-item>
                    <!-- <a-button type="primary" @click="clothesMakeTag">提交</a-button> -->
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
        <a-button @click="$refs.clothesImages.show();display=true" type="primary" v-if='userInfo.type === 3'>拍照分拣</a-button>
        <a-button @click="$refs.clothesImages.show1();display=false" type="primary" v-if='userInfo.type === 3' style="margin-left: 20px">已拍图片</a-button>
        <a-divider style="margin-bottom: 24px" />
        <h3 class="table-title" style="margin-bottom:10px">已存在的拆分</h3>
        <a-table rowKey="id" :dataSource="clothesSplitList" :columns="columns"></a-table>
      </a-card>
    </a-spin>
    <clothesImages ref="clothesImages" :images="JSON.parse(clothesInfo.image)" :cid="clothesInfo.id" @change="clothesRemarkDetail" :display="display"/>
    <clothesColorForm ref="clothesColorForm" :list="remarkColorList" :cid="clothesInfo.id" v-model="remark.color"/>
    <clothesTagForm ref="clothesSpForm" :list="remarkSplitList" type="peijian" :cid="clothesInfo.id" v-model="remark.split" @a="clothesRemarkDetail"/>
    <clothesTagForm ref="clothesTagForm" :list="remarkTagList" :cid="clothesInfo.id" v-model="remark.tag" />
  </page-header-wrapper>
</template>

<script>
import {
  clothesMakeColor,
  clothesMakeTag,
  clothesRemarkList,
  clothesRemarkDetail,
  clothesSplit,
  clothesAddTag,
  clothesAddColor,
} from '@/api/clothes'

import clothesStatus from '@/mixins/clothesStatus'
import orderStatus from '@/mixins/orderStatus'
import BackButton from '@/components/BackButton'
import clothesTagForm from './modules/clothesTagForm'
import clothesColorForm from './modules/clothesColorForm.vue'
import clothesImages from './modules/clothesImages.vue'
import {mapGetters} from "vuex";

const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '条形码',
    dataIndex: 'bar_code'
  },
  {
    title: '货架号',
    dataIndex: 'monad_code'
  }
]

export default {
  mixins: [clothesStatus, orderStatus],
  components: {
    BackButton,
    clothesTagForm,
    clothesColorForm,
    clothesImages
  },
  data () {
    return {
      loading: false,
      clothesInfo: {},
      remarkColorList: [],
      remarkSplitList: [],
      remarkTagList: [],
      clothesSplitList: [],
      remark: {
        color: undefined,
        split: undefined,
        tag: undefined
      },
      addRemark: {
        color: undefined,
        tag: undefined
      },
      display: true,
      columns
    }
  },
  created () {
    this.id = this.$route.params.id
    this.seal_code = this.$route.params.seal_code
    this.clothesRemarkDetail()
    this.clothesRemarkList()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    clothesRemarkDetail () {
      //this.loading = true
      clothesRemarkDetail({ id: this.id, seal_code: this.seal_code }).then(res => {
        //this.loading = false
        this.clothesInfo = res.data.info
        this.clothesSplitList = res.data.split
      })
    },
    clothesRemarkList () {
      this.loading = true
      clothesRemarkList().then(res => {
        this.remarkColorList = res.data.color
        this.remarkSplitList = res.data.split
        this.remarkTagList = res.data.tag
        this.loading = false
      })
    },
    clothesSplit () {
      const params = {
        id: this.clothesInfo.id,
        split: this.remark.split
      }
      clothesSplit(params).then(res => {
        this.$message.success('操作成功')
        this.clothesRemarkDetail()
      })
    },
    clothesMakeTag () {
      const params = {
        id: this.clothesInfo.id,
        tag: this.remark.tag
      }
      clothesMakeTag(params).then(res => {
        this.$message.success('操作成功')
      })
    },
    clothesMakeColor () {
      const params = {
        id: this.clothesInfo.id,
        color: this.remark.color
      }
      clothesMakeColor(params).then(res => {
        this.$message.success('操作成功')
      })
    },
    clothesAddColor () {
      // console.log(!23)
      const params = {
        id: this.clothesInfo.id,
        name: this.addRemark.color
      }
      clothesAddColor(params).then(res => {
        this.$message.success('操作成功')
        this.clothesRemarkList()
        this.addRemark.color = undefined
      })
    },
    clothesAddTag () {
      const params = {
        id: this.clothesInfo.id,
        name: this.addRemark.tag
      }
      clothesAddTag(params).then(res => {
        this.$message.success('操作成功');
        this.clothesRemarkList();
        this.addRemark.tag = undefined;
        this.$refs.clothesTagForm.clothesRemarkList();
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-card-body {
  padding: 24px 48px;
}
.clothes-detail {
  position: relative;
  .clothes-add-btns {
    position: absolute;
    bottom: 0;
    right: 100px;
    width: 450px;
  }
}
</style>
